<template>
	<view style="padding: 10px 0;display: flex;flex-direction: column;">
		<uni-card is-full class="table-container" style="max-height: 60vh;">
			<uni-table class="uni-table" emptyText="暂无更多数据">
				<uni-tr class="table-head">
					<uni-th align="center" width="30">ID</uni-th>
					<uni-th>名称</uni-th>
					<uni-th align="center">指导价</uni-th>
					<uni-th align="center">结算价</uni-th>
					<uni-th align="center">代币价</uni-th>
					<uni-th align="center">积分价</uni-th>
					<uni-th align="center">库存</uni-th>
					<uni-th align="center">显示销量</uni-th>
					<uni-th align="center">累计销量</uni-th>
					<uni-th width="60">状态</uni-th>
					<uni-th width="60">上架</uni-th>
					<uni-th width="60">卡券</uni-th>
					<uni-th width="60">折扣</uni-th>
					<uni-th width="60">立返</uni-th>
					<uni-th>
						<view style="display: flex;gap: 10px;">
							<view v-if="!Boolean(curSpu?.spu)" class="gl-link gl-link-success" @tap="popupEvent('new')">
								<text>新增</text>
							</view>
							<view class="gl-link gl-link-base" @tap="refresh">
								<text>刷新</text>
							</view>
						</view>
					</uni-th>
				</uni-tr>


				<uni-tr v-for="(item, index) in data" :key="index">
					<uni-td align="center" width="30">{{item.id}}</uni-td>
					<uni-td>
						<view style="display: flex;align-items: center;gap: 5px;position: relative;"
							@tap="editSkuEvent(item)">
							<image :src="sConf.cos + (item.icon ??'/media/default/cover.png')" mode="widthFix"
								style="width: 64px;border-radius: 5px;"></image>
							<text selectable style="font-weight: bold;">{{item.name}}</text>
						</view>
					</uni-td>
					<uni-td align="center">{{((item.money || 0) / 100).toFixed(2)}}</uni-td>
					<uni-td align="center">{{((item.price || 0) / 100).toFixed(2)}}</uni-td>
					<uni-td align="center">{{((item.setprice || 0) / 100).toFixed(2)}}</uni-td>
					<uni-td align="center">{{item.point ?? '--'}}</uni-td>
					<uni-td align="center">{{item.fund ?? 0}}</uni-td>
					<uni-td align="center">{{item.hot ?? 0}}</uni-td>
					<uni-td align="center">--</uni-td>
					<uni-td>
						<switch :checked="Boolean(item.status)" :disabled="Boolean(item.sku)"
							style="transform:scale(0.7)" @change="event => EventStateChange(event, item.id)" />
					</uni-td>
					<uni-td>
						<switch :checked="Boolean(item.is_line)" style="transform:scale(0.7)"
							@change="event => EventListChange(event, item.id)" />
					</uni-td>
					<uni-td>
						<switch :checked="Boolean(item.card)" style="transform:scale(0.7)"
							@change="event => EventCardChange(event, item.id)" />
					</uni-td>
					<uni-td>
						<switch :checked="Boolean(item.discount)" style="transform:scale(0.7)"
							@change="event => EventDiscChange(event, item.id)" />
					</uni-td>
					<uni-td>
						<switch :checked="Boolean(item.is_back)" style="transform:scale(0.7)"
							@change="event => EventBackChange(event, item.id)" />
					</uni-td>
					<uni-td>
						<view style="display: flex;gap: 10px;">
							<view class="gl-link gl-link-base">
								<text @tap="editSkuEvent(item)">详情</text>
							</view>
							<view v-if="!Boolean(item.sku)" class="gl-link gl-link-error">
								<text @tap="delSkuEvent(item)">移除</text>
							</view>
						</view>
					</uni-td>
				</uni-tr>

			</uni-table>


			<view class="gl-footer">
				<uni-pagination :show-icon="true" :total="count" :pageSize="size" v-model="page" title="翻页"
					@change="refresh" />
			</view>
		</uni-card>


		<!-- popup模态窗口 -->
		<popSkuCardVue ref="popSkuCard" :pid="curSpu?.pid" :gid="curSpu?.id" @refresh="refresh"></popSkuCardVue>

	</view>
</template>

<script>
	import psMethod from '@/common/psMethod';
	import popSkuCardVue from '@/components/sub-product/pop-sku-card.vue';
	export default {
		data() {
			return {
				swiperH: 0,
				count: 0, // 记录数
				size: 50, // 页大小
				page: 1, // 当前页
				sConf: getApp().globalData,



				skuData: [],
				curSpu: null,
				curSku: {
					id: null,
					icon: '/media/default/cover.png',
					name: null,
					idcode: null,
					sdcode: null,
					setprice: 0,
					money: 0,
					price: 0,
					fund: 0,
					discount: 0,
					sku: null,
					pid: null,
					gid: null,
				}
			}
		},
		mounted() {
			// let window = uni.getWindowInfo();
			// this.designLayout(window.windowHeight);
			// // 加载初始数据			
			// this.curSpu = JSON.parse(JSON.stringify(this.data)) 
			// this.curSku.pid = this.pid
			// this.curSku.gid = this.gid
			// this.refresh()
		},
		props: {
			data: {
				type: Object,
				default: Array
			},
			pid: {
				type: Number,
				default: null
			},
			gid: {
				type: Number,
				default: null
			},
		},
		components: {
			popSkuCardVue
		},
		methods: {
			/**
			 * 创建SKU
			 */
			popupEvent(e) {
				let that = this
				uni.showModal({
					title: '新增SKU',
					placeholderText: '请输入SKU名称',
					editable: true,
					success(r) {
						let name = r.content.trim()
						if (r.confirm && name) {
							console.log('new sku=>', name);
							let data = {
								name: name,
								pid: that.pid,
								gid: that.gid
							}
							that.EventDataPost(data)
						}
					}
				})

			},
			/**
			 * 状态
			 */
			EventStateChange(e, index) {
				let data = {
					status: e.detail.value ? 1 : 0
				}
				this.EventDataChange(data, index)
			},
			/**
			 * 上架
			 */
			EventListChange(e, index) {
				let data = {
					is_line: e.detail.value ? 1 : 0
				}
				this.EventDataChange(data, index)
			},
			/**
			 * 折扣
			 */
			EventDiscChange(e, index) {
				let data = {
					discount: e.detail.value ? 1 : 0
				}
				this.EventDataChange(data, index)
			},
			/**
			 * 卡券
			 */
			EventCardChange(e, index) {
				let data = {
					card: e.detail.value ? 1 : 0
				}
				this.EventDataChange(data, index)
			},
			/**
			 * 立返
			 */
			EventBackChange(e, index) {
				let data = {
					is_back: e.detail.value ? 1 : 0
				}
				this.EventDataChange(data, index)
			},
			/**
			 * 编辑信息
			 */
			EventDataChange(data, index) {
				let token = this.sConf.auth.token || '';
				psMethod.syncAuthenticatorRequest(`/admin/cargoSku/${index}/`, 'PATCH', token, data).then(res => {
					// uni.showToast({
					// 	title: '请求完成'
					// })
				}).catch(err => {
					uni.showToast({
						title: '请求失败'
					})
					this.refresh()
				})
			},
			/**
			 * 创建SKU
			 */
			EventDataPost(data) {
				let token = this.sConf.auth.token || '';
				psMethod.syncAuthenticatorRequest('/admin/cargoSku/', 'POST', token, data).then(res => {
					uni.showToast({
						title: '请求完成'
					})
					this.refresh()
				}).catch(err => {
					uni.showToast({
						title: '请求失败'
					})
				})
			},
			/**
			 * 编辑SKU
			 */
			editSkuEvent(e) {
				this.$emit('tosku', e)
			},
			/**
			 * 移除SKU
			 */
			delSkuEvent(e) {
				let that = this
				let token = this.sConf.auth.token || '';
				uni.showModal({
					title: '移除SKU',
					content: `是否要移除SKU->${e.name} `,
					success(r) {
						if (r.confirm) {
							psMethod.syncAuthenticatorRequest(`/admin/cargoSku/${e.id}/`, 'DELETE', token, {})
								.then(
									res => {
										uni.showToast({
											title: '请求完成'
										})
										that.refresh()
									})
						}
					}
				})


			},
			/**
			 * 刷新数据
			 */
			refresh() {
				this.$emit('reload')
			}
			// 	designLayout(wh) {
			// 		this.$nextTick(() => {
			// 			const query = uni.createSelectorQuery().in(this);
			// 			query.select('.gl-media-view').boundingClientRect();
			// 			query.exec((res) => {
			// 				this.swiperH = wh - Math.ceil(res[0].top) - 80;
			// 			});
			// 		})
			// 	},
			// 	/**
			// 	 * 传图组件
			// 	 */
			// 	changeCover() {
			// 		this.$refs.cosCover.open()
			// 	},
			// 	/**
			// 	 * 传图结果
			// 	 */
			// 	EventFinish(e) {
			// 		console.log('EventFinish', e);
			// 		this.curSku.icon = e[0]
			// 	},
			// 	refresh() {
			// 		let host = this.sConf.host + '/admin/cargoSku/';
			// 		let token = this.sConf.auth.token || '';
			// 		let data = {
			// 			page: this.page,
			// 			gid: this.gid,
			// 			ordering: '-created'
			// 		}
			// 		psMethod.authenticatorGetSync(host, token, data).then(res => {
			// 			console.log('加载商品SKU列表', res);
			// 			if (res.rescode === 200) {
			// 				this.skuData = res.resmsg
			// 				this.count = res.count;
			// 				this.size = res.size;
			// 			}
			// 		})
			// 	},
			// 	checkBoxChange(e) {
			// 		this.curSku.discount = e.detail.value.includes('discount') ? 1 : 0
			// 	},
			// 	/**
			// 	 * 创建SKU
			// 	 */
			// 	popupEvent(e = 'close') {
			// 		console.log('actionsClick', e);
			// 		if (e === 'reload') {
			// 			this.refresh()
			// 		} else if (e === 'save') {
			// 			if (Boolean(this.curSku.id)) {
			// 				this.loadDataSkuPatch()
			// 			} else {
			// 				this.loadDataSkuPost()
			// 			}
			// 		} else if (e === 'new') {
			// 			this.$refs.popSkuCard.open()
			// 		} else {
			// 			this.$refs.popSkuCard.close()
			// 		}
			// 	},
			// 	/**
			// 	 * 编辑SKU
			// 	 */
			// 	editSkuEvent(e) {
			// 		console.log('editSkuEvent', e.id);
			// 		// this.curSku = e
			// 		// this.popupEvent('new')
			// 		this.$refs.popSkuCard.open(e.id)
			// 	},
			// 	/**
			// 	 * 移除SKU
			// 	 */
			// 	delSkuEvent(e) {
			// 		uni.showToast({
			// 			title: '该功能停用',
			// 			icon: 'error'
			// 		})
			// 		return
			// 		let that = this
			// 		uni.showModal({
			// 			title: '删除SKU',
			// 			content: '是否确认要删除改产品?',
			// 			success(r) {
			// 				if (r.confirm) {
			// 					let host = that.sConf.host + '/admin/cargoSku/' + e.id + '/';
			// 					let token = that.sConf.auth.token || '';
			// 					psMethod.authenticatorDeleteSync(host, token).then(res => {
			// 						if (res.rescode === 200) {
			// 							uni.showToast({
			// 								title: '提交成功',
			// 								success() {
			// 									that.refresh()
			// 									that.popupEvent()
			// 								}
			// 							})
			// 						}
			// 					})
			// 				}
			// 			}
			// 		})
			// 	},
			// 	/**
			// 	 * 提交保存
			// 	 */
			// 	loadDataSkuPost() {
			// 		let host = this.sConf.host + '/admin/cargoSku/';
			// 		let token = this.sConf.auth.token || '';
			// 		let data = this.curSku
			// 		psMethod.authenticatorPostSync(host, token, data).then(res => {
			// 			if (res.rescode === 200) {
			// 				let that = this
			// 				uni.showToast({
			// 					title: '提交成功',
			// 					success() {
			// 						that.refresh()
			// 						that.popupEvent()
			// 					}
			// 				})
			// 			}
			// 		})
			// 	},
			// 	loadDataSkuPatch() {
			// 		let host = this.sConf.host + '/admin/cargoSku/' + this.curSku.id + '/';
			// 		let token = this.sConf.auth.token || '';
			// 		let data = this.curSku
			// 		psMethod.authenticatorPatchSync(host, token, data).then(res => {
			// 			if (res.rescode === 200) {
			// 				let that = this
			// 				uni.showToast({
			// 					title: '提交成功',
			// 					success() {
			// 						that.refresh()
			// 						that.popupEvent()
			// 					}
			// 				})
			// 			}
			// 		})
			// 	},
			// 	EventStateChange(e, index) {
			// 		console.log('EventStateChange', e.detail.value, index);
			// 		let that = this
			// 		let host = this.sConf.host + '/admin/cargoSku/' + index + '/';
			// 		let token = this.sConf.auth.token || '';
			// 		let data = {
			// 			status: e.detail.value ? 1 : 0
			// 		}
			// 		psMethod.authenticatorPatchSync(host, token, data).catch(err => {
			// 			uni.showToast({
			// 				title: '请求失败',
			// 				success() {
			// 					that.refresh()
			// 				}
			// 			})
			// 		})
			// 	},
			// 	EventListChange(e, index) {
			// 		console.log('EventListChange', e.detail.value, index);
			// 		let that = this
			// 		let host = this.sConf.host + '/admin/cargoSku/' + index + '/';
			// 		let token = this.sConf.auth.token || '';
			// 		let data = {
			// 			is_line: e.detail.value ? 1 : 0
			// 		}
			// 		psMethod.authenticatorPatchSync(host, token, data).catch(err => {
			// 			console.log('SKU商品上架', err);
			// 			uni.showToast({
			// 				title: err.resmsg.detail || '请求失败',
			// 				success() {
			// 					that.refresh()
			// 				}
			// 			})
			// 		})
			// 	}
		}
	}
</script>

<style lang="scss" scoped>
	/* 表格垂直滚动 */
	.table-container {
		/* height: 400px; */
		overflow-y: auto;

		::v-deep .uni-table .table-head th {
			font-weight: bold;
			z-index: 2;
			background-color: #fff;
			position: -webkit-sticky;
			position: sticky;
			top: 0;
		}

		::v-deep .uni-table-scroll {
			overflow: visible;
		}
	}
</style>